<template>
    <div>
        <page-main>
            <div id="mapContainer"></div>
            <div style="margin-top: 15px;">
                <div style="display: flex; border-top: 1px solid #ccc; padding: 5px 0;">
                    <div style="font-weight: 600; width: 20%; font-size: 22px; height: 40px; line-height: 40px;">设备上报信息</div>
                    <el-button @click="dataList = []" icon="el-icon-delete" plain type="primary">清除数据</el-button>
                    <!-- <div style="line-height: 40px; background-color: #8FBCD9; color: #fff; padding: 0 15px; margin-left: 15px;">数据过滤 -></div> -->
                    <div style="line-height: 40px; margin-left: 20px; margin-right: 10px;">数据类型:</div>
                    <el-cascader :options="options" :props="props" clearable collapse-tags v-model="dataType" @change="dataTypeChange"></el-cascader>
                    <!-- <div style="line-height: 40px; margin-left: 15px; margin-right: 15px;">设备号码:</div>
                    <el-input style="width: 200px;" v-model="device_no"></el-input> -->
                </div>
                <el-table :data="dataList" style="width: 100%;">
                    <el-table-column prop="device_no" label="设备编号"> </el-table-column>
                    <el-table-column prop="address" label="位置信息"> </el-table-column>
                    <el-table-column prop="exec_remark" label="事件"> </el-table-column>
                    <!-- <el-table-column prop="address" label="量值"> </el-table-column> -->
                    <el-table-column prop="address" label="发生时间">
                        <template #default="scope">
                            {{ transitionTime(scope.row.create_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="yj_unit_full_name" label="联网单位"> </el-table-column>
                </el-table>
            </div>
        </page-main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options: [
                // 1.正常，2.预警，3故障, 4.停用, 5.报警
                {label: '正常', value: 1 },
                {label: '预警', value: 2 },
                {label: '故障', value: 3 },
                // {label: '停用', value: 4 },
                {label: '报警', value: 5 },
            ],
            props: {
                multiple: true,
                emitPath: true
            },
            dataList: [],
            dataType: [],
            params: [],
            deviceMap: '',
            deviceInfo: '',
            // 攀枝花文本
            pzhSum: '',
            dongquData: '',
            miyixianData: '',
            renhequData: '',
            xiquData: '',
            yanbianxianData: '',
            dongquSum: '',
            miyixianSum: '',
            renhequSum: '',
            xiquSum: '',
            yanbianxianSum: '',
            status: {
                1: '正常',
                2: '预警',
                3: '故障',
                4: '停用',
                5: '报警',
                6: '离线'
            },
            lot: '',
            lat: '',
            device_no: '',
            // 定时器
            setTime: null,
        }
    },
    created() {
        this.getDataList()
        this.getDeviceInfo()
        // this.setTime = setInterval(() => {
        //     this.getDeviceInfo()
        // }, 15000)
    },
    beforeDestroy() {
        clearInterval(this.setTime)
    },
    methods: {
        // 数据类型改变
        dataTypeChange(data) {
            if (!data.length) return this.params = []
            this.params = []
            data.forEach(item => {
                this.params.push(item[0])
            })
        },
        // 设备上报信息
        getDeviceInfo() {
            this.$api.post('/unit/DeviceWarning/warnLog', {status: this.params, device_no: this.device_no ,page: 1, rows: 15, before_time: 15}).then(res => {
                this.dataList.push(...res.data.list)
            })
        },
        getDataList(rows) {
            let params = {
                page: 1,
                rows: rows ? rows : 10,
                total_type: ['yj_unit']
            }
            this.$api.post('/unit/DeviceWarning/deviceList', params).then(res => {
                this.getPoint(res.data)
            })
            // 东区
            this.$api.post('/unit/DeviceWarning/deviceList', {...params, region_id: 510402}).then(res => {
                this.dongquData = res.data
            })
            // 米易县
            this.$api.post('/unit/DeviceWarning/deviceList', {...params, region_id: 510421}).then(res => {
                this.miyixianData = res.data
            })
            // 仁和区
            this.$api.post('/unit/DeviceWarning/deviceList', {...params, region_id: 510411}).then(res => {
                this.renhequData = res.data
            })
            // 西区
            this.$api.post('/unit/DeviceWarning/deviceList', {...params, region_id: 510403}).then(res => {
                this.xiquData = res.data
            })
            // 盐边县
            this.$api.post('/unit/DeviceWarning/deviceList', {...params, region_id: 510422}).then(res => {
                this.yanbianxianData = res.data
            })
        },
        getPoint(data) {
            return new Promise((resolve) => {
                let map = new AMap.Map('mapContainer', {
                    resizeEnable: true,
                    center: [101.718637, 26.582347],
                    zoom: 7,
                })
                // 地图放大缩小控件
                let toolBar = new AMap.ToolBar({
                    visible: false,
                    position: {
                        top: '110px',
                        right: '40px',
                    },
                })
                toolBar.show()
                map.addControl(toolBar)
                this.deviceMap = map
                // 创建纯文本标记 显示攀枝花总设备数
                this.pzhSum = new AMap.Text({
                    text: data.total,
                    cursor:'pointer',
                    style:{
                        'background-color': '#16a1ec',
                        'text-align': 'center',
                        'font-size': '20px',
                        'color': '#fff',
                        'width': '60px',
                        'height': '60px',
                        'line-height': '55px',
                        'border-radius': '50%'
                    },
                    position: [101.688637, 26.632347]
                });
                this.pzhSum.setMap(map);
                // 设置文本提示
                this.pzhSum.setTitle();
                this.pzhSum.setLabel({
                    direction:'right',
                    offset: new AMap.Pixel(-30, -40),  //设置文本标注偏移量
                    content: "<div class='pzhInfo'>攀枝花</div>", //设置文本标注内容
                });
                this.pzhSum.on('click', this.clickPZH)
                // 缩放结束事件
                this.deviceMap.on('zoomend', this.zoomEnd)
                resolve()
            })
        },
        // 缩放开始时间
        // 缩放结束事件
        zoomEnd() {
            let zoom = this.deviceMap.getZoom()
            let data = [
                {
                    name: '东区',
                    data: this.dongquData,
                    latitude: 26.5809,
                    longitude: 101.715,
                    sum: 'dongquSum',
                },
                {
                    name: '米易县',
                    data: this.miyixianData,
                    latitude: 26.8875,
                    longitude: 102.11,
                    sum: 'miyixianSum',
                },
                {
                    name: '仁和区',
                    data: this.renhequData,
                    latitude: 26.4972,
                    longitude: 101.738,
                    sum: 'renhequSum',
                },
                {
                    name: '西区',
                    data: this.xiquData,
                    latitude: 26.5968,
                    longitude: 101.638,
                    sum: 'xiquSum',
                },
                {
                    name: '盐边县',
                    data: this.yanbianxianData,
                    latitude: 26.6776,
                    longitude: 101.852,
                    sum: 'yanbianxianSum',
                },
            ]
            // 清除搜索覆盖物
            this.deviceMap.clearMap()
            if (zoom < 10) {
                this.pzhSum.setMap(this.deviceMap)
            } else if (zoom >= 10 && zoom < 12) {
                this.deviceInfo = new AMap.InfoWindow({
                    offset: new AMap.Pixel(10, -5),
                });
                data.forEach(item => {
                    if (item.data.total != 0) {
                        this[item.sum] = new AMap.Text({
                            text: item.data.total,
                            cursor:'pointer',
                            style:{
                                'background-color': '#16a1ec',
                                'text-align': 'center',
                                'font-size': '16px',
                                'color': '#fff',
                                'width': '50px',
                                'height': '50px',
                                'line-height': '45px',
                                'border-radius': '50%'
                            },
                            position: [item.longitude, item.latitude]
                        });
                        this[item.sum].setTitle();
                        this[item.sum].setLabel({
                            direction:'right',
                            offset: new AMap.Pixel(-30, -35),  //设置文本标注偏移量
                            content: `<div class='pzhInfo'>${item.name}</div>`, //设置文本标注内容
                        });
                        this[item.sum].setMap(this.deviceMap);
                        // 缩放事件
                        this.deviceMap.on('zoomchange', this.zoomQu)
                        // 点击五个区域,显示对应的设备
                        this[item.sum].on('click', () => {
                            // 缩放结束事件
                            this.deviceMap.on('zoomend', this.zoomEnd)
                            item.data.list.map(val => {
                                let marker = new AMap.Marker({
                                    position: [val.longitude, val.latitude],
                                    map: this.deviceMap,
                                })
                                marker.build_id = val.id
                                marker.content = `<div style="padding: 5px 10px;"><div style="font-weight: bold; font-size: 20px;">${val.device_no}</div><div>类型: ${val.mold_name}</div><div>位置：${val.address}</div><div>联网单位：${val.unit_full_name}</div><div>状态: ${this.status[val.status]}</div><div>是否在线: ${val.is_online == 1 ? '是' : '否'}</div></div>`
                                marker.on('click', this.infoOpen)
                            })
                            this.deviceMap.remove(this.dongquSum)
                            this.deviceMap.remove(this.miyixianSum)
                            this.deviceMap.remove(this.renhequSum)
                            this.deviceMap.remove(this.xiquSum)
                            this.deviceMap.remove(this.yanbianxianSum)
                            // this.deviceMap.setFitView()
                            this.deviceMap.setZoom(13)
                            this.deviceMap.setCenter([item.longitude, item.latitude])
                        })
                    }
                })
            } else {
                data.forEach(item => {
                    item.data.list.map(val => {
                        let marker = new AMap.Marker({
                            position: [val.longitude, val.latitude],
                            map: this.deviceMap,
                        })
                        marker.build_id = val.id
                        marker.content = `<div style="padding: 5px 10px;"><div style="font-weight: bold; font-size: 20px;">${val.device_no}</div><div>类型: ${val.mold_name}</div><div>位置：${val.address}</div><div>联网单位：${val.unit_full_name}</div><div>状态: ${this.status[val.status]}</div><div>是否在线: ${val.is_online == 1 ? '是' : '否'}</div></div>`
                        marker.on('click', this.infoOpen)
                    })
                    this.deviceMap.remove(this.dongquSum)
                    this.deviceMap.remove(this.miyixianSum)
                    this.deviceMap.remove(this.renhequSum)
                    this.deviceMap.remove(this.xiquSum)
                    this.deviceMap.remove(this.yanbianxianSum)
                })
            }
        },
        // 点击攀枝花文本
        clickPZH() {
            this.deviceMap.remove(this.pzhSum)
            // 如果不是缩放事件,才重置地图
            let map = new AMap.Map('mapContainer', {
                resizeEnable: true,
                center: [101.718637, 26.582347],
                zoom: 10,
            })
            // 地图放大缩小控件
            let toolBar = new AMap.ToolBar({
                visible: false,
                position: {
                    top: '110px',
                    right: '40px',
                },
            })
            toolBar.show()
            map.addControl(toolBar)
            this.deviceMap = map
            // 缩放结束事件
            this.deviceMap.on('zoomend', this.zoomEnd)
            // 设置攀枝花五个区的设备数量
            // 拼接数据
            let data = [
                {
                    name: '东区',
                    data: this.dongquData,
                    latitude: 26.5809,
                    longitude: 101.715,
                    sum: 'dongquSum',
                },
                {
                    name: '米易县',
                    data: this.miyixianData,
                    latitude: 26.8875,
                    longitude: 102.11,
                    sum: 'miyixianSum',
                },
                {
                    name: '仁和区',
                    data: this.renhequData,
                    latitude: 26.4972,
                    longitude: 101.738,
                    sum: 'renhequSum',
                },
                {
                    name: '西区',
                    data: this.xiquData,
                    latitude: 26.5968,
                    longitude: 101.638,
                    sum: 'xiquSum',
                },
                {
                    name: '盐边县',
                    data: this.yanbianxianData,
                    latitude: 26.6776,
                    longitude: 101.852,
                    sum: 'yanbianxianSum',
                },
            ]
            this.deviceInfo = new AMap.InfoWindow({
                offset: new AMap.Pixel(10, -5),
            });
            data.forEach(item => {
                if (item.data.total != 0) {
                    this[item.sum] = new AMap.Text({
                        text: item.data.total,
                        cursor:'pointer',
                        style:{
                            'background-color': '#16a1ec',
                            'text-align': 'center',
                            'font-size': '16px',
                            'color': '#fff',
                            'width': '50px',
                            'height': '50px',
                            'line-height': '45px',
                            'border-radius': '50%'
                        },
                        position: [item.longitude, item.latitude]
                    });
                    this[item.sum].setTitle();
                    this[item.sum].setLabel({
                        direction:'right',
                        offset: new AMap.Pixel(-30, -35),  //设置文本标注偏移量
                        content: `<div class='pzhInfo'>${item.name}</div>`, //设置文本标注内容
                    });
                    this[item.sum].setMap(this.deviceMap);
                    // 缩放事件
                    this.deviceMap.on('zoomchange', this.zoomQu)
                    // 点击五个区域,显示对应的设备
                    this[item.sum].on('click', () => {
                        // 如果是缩放,才重置地图
                        let map = new AMap.Map('mapContainer', {
                            resizeEnable: true,
                            center: [item.longitude, item.latitude],
                            zoom: 13,
                        })
                        // 地图放大缩小控件
                        let toolBar = new AMap.ToolBar({
                            visible: false,
                            position: {
                                top: '110px',
                                right: '40px',
                            },
                        })
                        toolBar.show()
                        map.addControl(toolBar)
                        this.deviceMap = map
                        // 缩放结束事件
                        this.deviceMap.on('zoomend', this.zoomEnd)
                        item.data.list.map(val => {
                            let marker = new AMap.Marker({
                                position: [val.longitude, val.latitude],
                                map: this.deviceMap,
                            })
                            marker.device_no = val.device_no
                            marker.content = `<div style="padding: 5px 10px;"><div style="font-weight: bold; font-size: 20px;">${val.device_no}</div><div>类型: ${val.mold_name}</div><div>位置：${val.address}</div><div>联网单位：${val.unit_full_name}</div><div>状态: ${this.status[val.status]}</div><div>是否在线: ${val.is_online == 1 ? '是' : '否'}</div></div>`
                            marker.on('click', this.infoOpen)
                        })
                        this.deviceMap.remove(this.dongquSum)
                        this.deviceMap.remove(this.miyixianSum)
                        this.deviceMap.remove(this.renhequSum)
                        this.deviceMap.remove(this.xiquSum)
                        this.deviceMap.remove(this.yanbianxianSum)
                        // this.deviceMap.setFitView()
                        // this.deviceMap.setZoom(13)
                        this.deviceMap.setCenter([item.longitude, item.latitude])
                    })
                }
            })
        },
        // 设备信息
        infoOpen(e) {
            this.deviceInfo.setContent(e.target.content);
            this.deviceInfo.open(this.deviceMap, e.target.getPosition());
            this.device_no=e.target.device_no
            this.getDeviceInfo()
        },
        // 转换时间
        transitionTime(value) {
            value = value * 1000
            let date = new Date(parseInt(value))
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            let h = date.getHours()
            h = h < 10 ? ('0' + h) : h
            let m = date.getMinutes()
            m = m < 10 ? ('0' + m) : m
            let s = date.getSeconds()
            s = s < 10 ? ('0' + s) : s
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
        }
    },
}
</script>
<style scoped>
#mapContainer {
    width: 100%;
    height: 50vh;
}
:deep(.el-table__body-wrapper) {
    height: 185px;
    overflow-y: auto;
}
</style>
<style>
.amap-marker img {
    width: 30px;
    height: 39px;
}
.amap-marker-label {
    color: red;
    border: none;
    background-color: rgba(255, 255, 255, 0);
}
.pzhInfo {
    font-size: 26px;
}

</style>
